<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Qbot Console">
  <meta name="author" content="ScratchMaker">
  <meta name="full-screen" content="yes">

  <title>Qbot Console</title>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script type="text/javascript" src="/static/jquery-3.5.0.min.js"></script>
  <!-- Bootstrap Core CSS -->
  <link href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Qbot websocket client -->
  <script type="text/javascript" src="/static/qbot_webclient.js"></script>
  <!-- Echarts For Graphis -->
  <script type="text/javascript" src="/static/echarts.min.js"></script>
  <script type="text/javascript" src="/static/battery.js"></script>
  <!-- Custom CSS -->
  <link rel="stylesheet" href="/static/css/style.css">
  <link rel="stylesheet" href="/static/css/battery.css">
  <link rel="stylesheet" type="text/css" href="/static/css/animate.min.css">
  <link href="/static/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="/static/button.css" rel="stylesheet" type="text/css">

  <style>
    .header {
      margin-bottom: 10px;
      text-align: right;
    }
  </style>

</head>

<body>

  <!-- /////////////////////////////////////////Navigation -->
  <nav id="menu" class="navbar navbar-default navbar-fixed-top"
    style="background-color: #011F29; margin-bottom: 0px; padding: 1px; border-radius: 0px;">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div>
        <a class="navbar-brand" href="#qbot-terminal"><i class="fa fa-home"></i>
          控制台</a>
        <a class="navbar-brand" href="#qbot-setting"><i class="fa fa-cog"></i>
          设置</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->

      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <!-- Navigation -->

  <!-- /////////////////////////////////////////Header -->
  <!-- Header -->

  <div id="page-content" class="sub-page">
    <section id="" class="box-content box-style text-center">
      <div class="container">
        <div class="row">
          <div class="portfolio-items">
            <div id="qbot-terminal" class="col-sm-12 col-md-12 col-lg-12">
              <div class="row heading wow fadeInDown">
                <div class="col-lg-12">
                  <hr>
                  <h2 id="scratch-modal-title"><strong><i class="fa fa-location-arrow"></i>控制台</strong></h2>
                </div>
              </div>
              <div
                style="text-align: left; margin-bottom: 5px; display: flex; align-items: center;justify-content: space-around;font-size: 18px;">
                <strong style="display:flex;align-items: center;">网络：<i id="net-status"
                    class="fa fa-times"></i></strong>
                <strong class="batteryIcon">电量：
                      <span class="batteryIconBody">
                          <!-- <span id="batteryIconProgress" class="batteryIconProgress"></span> -->
                          <span class="batteryIconContent" id="batteryIconContent"></span>
                      </span>
                      <span class="batteryIconHead"></span>
                </strong>
              </div>
              <div class="col-sm-6 col-md-6 col-lg-6">
                <div
                  style="text-align: left; margin-bottom: 5px; display: flex; align-items: center;justify-content: flex-start;font-size: 13px;">
                  <div>编码器圈数：<a id="encoder-turns">0.0</a>, &nbsp;电机圈数：<a id="motor2-turns">0.0</a>, &nbsp;电机转速：<a
                      id="motor2-rpm">0.0</a>rpm</div>
                </div>
                <div id="stauts-window"
                  style="border-style: solid;border-width: 3px;padding: 0;margin: 0;height: 300px;"></div>
              </div>

              <div class="col-sm-6 col-md-6 col-lg-6">
                <div
                style="text-align: left; margin: 5px; display: flex; align-items: center;justify-content: space-around;-=">
                <strong style="display:flex;align-items: center;">编码器状态<i style="font-size: 15px;"
                    id="encoder-status" class="fa fa-times"></i></strong>
                <strong style="display:flex;align-items: center;">电机1状态<i style="font-size: 15px;"
                    id="motor1-status" class="fa fa-times"></i></strong>
                <strong style="display:flex;align-items: center;">电机2状态<i style="font-size: 15px;"
                    id="motor2-status" class="fa fa-times"></i></strong>
              </div>
                <div style="text-align: center;">
                  <a class="button button-raised button-pill button-inverse button-large" onclick=ws_connect()>连接设备</a>
                  <br />
                  <a class="button button-raised button-pill button-primary button-large" onclick=spin(1)>前进</a>
                  <a class="button button-raised button-pill button-primary button-large" onclick=spin(-1)>后退</a>
                  <br />
                  <div><strong>设定速度：<span id="qbot-speed">0.00</span>&nbsp;m/s</strong></div>
                  <a class="button button-raised button-circle button-inverse button-large" onclick=speedUp()>+</a>
                  <a class="button button-raised button-circle button-inverse button-large" onclick=speedDown()>-</a>
                  <br />
                  <br />
                  <a class="button button-raised button-pill button-caution button-large" onclick=spinStop()>停止</a>
                  <br />
                </div>
                <div style="padding: 20px;">

                </div>
              </div>
            </div>
            <!-- 参数设定 -->
            <div id="qbot-setting" class="col-sm-12 col-md-12 col-lg-12">
              <div class="row heading wow fadeInDown">
                <div class="col-lg-12">
                  <hr>
                  <h2 id="scratch-modal-title"><strong><i class="fa fa-cog"></i>参数设置</strong></h2>
                </div>
                <div class="col-lg-12">
                  <div><strong>电机使能:</strong>
                    <a class="button button-raised button-circle button-action button-large"
                      onclick=qbotSetPower(true)>On</a>
                    <a class="button button-raised button-circle button-primary button-large"
                      onclick=qbotSetPower(false)>Off</a>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script type="text/javascript">
    qbotChartsInit();
    batteryPercent(0);
  </script>

  <!-- /////////////////////////////////////////Footer -->
  <footer>
    <div style="padding: 1px;" id="footer">
      <div class="container">
        <p>Copyright &copy; 2020. ScratchMaker All rights reserved.</p>
      </div>
    </div>
  </footer>
  <!-- Footer -->
</body>

</html>